<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="auto">
        <el-menu
            default-active="2"
            active-text-color="#ffd04b"
            background-color="rgb(0, 21, 41)"
            class="el-menu-vertical-demo"
            text-color="#fff"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
            collapse-transition
            router
        >
          <el-menu-item index="0" style="height: 10vh">
            <svg t="1679479962193" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="9574" width="30" height="30">
              <path
                  d="M335.657769 831.865977c0 10.134611 0 20.269222 0.202692 30.403833 0 2.189076 0 4.337614-0.202692 6.405074zM688.017924 152.765964v345.387543c-0.243231-110.426721-0.77023-220.893981-0.891846-331.320703a117.561487 117.561487 0 0 1 0.891846-14.06684z"
                  fill="#1296db" p-id="9575"></path>
              <path
                  d="M687.085539 508.49081a68.50997 68.50997 0 0 0 0.932385-10.337303v322.929244l-169.207465-154.73524-85.130733-77.631121-51.240593-47.105671-22.782605-20.796222-8.391458-7.661766-0.608077-0.527c-2.067461-1.662076-4.053844-3.405229-5.959151-4.986228s-3.567383-2.959306-5.837536-2.270153a5.067305 5.067305 0 0 0-3.202537 3.64846v-304.03833l1.743153 1.580999 34.741446 31.417294c18.282838 16.215378 36.72783 32.430755 54.97013 48.646133q38.916906 34.863062 77.590582 70.131508 30.606525 27.809373 61.131974 55.699822c24.323066 22.174529 48.321825 44.592288 72.644891 66.604664 10.94538 9.89138 21.971837 19.580068 33.038832 29.309295 2.35123 2.067461 4.661921 4.053844 7.053689 6.161843a5.959151 5.959151 0 0 0 5.675382 0.729692 4.702459 4.702459 0 0 0 2.270153-2.918768c0.324308-1.540461 0.324308-2.59446 0.567538-3.851152z"
                  fill="#1296db" p-id="9576"></path>
              <path
                  d="M335.292923 510.801501a63.523742 63.523742 0 0 0-0.405385 11.107534c0 103.373032 0 206.746064 0.770231 310.078558v36.808907a60.199589 60.199589 0 0 1-23.796067 44.957134c-27.60668 23.066375-53.348592 48.281287-79.98235 72.523276-11.148072 10.134611-22.215067 20.269222-33.687447 30.160603s-40.984367 11.107534-57.321359-2.553922a318.145708 318.145708 0 0 1-34.619832-35.106293 51.727054 51.727054 0 0 1-15.120839-35.227908c0-2.918768-0.243231-6.121305 0-9.648149 0-6.080767 0-12.161533 0.202692-18.282838 0.202692-17.431531 0-34.9036 0-52.335132V294.772133a51.240593 51.240593 0 0 1 1.540461-12.891225 74.671814 74.671814 0 0 1 4.053844-10.702149 89.833192 89.833192 0 0 1 8.188766-14.512763l64.86151-64.86151 41.308675-41.268136a31.78214 31.78214 0 0 1 7.459073-5.594306 32.633447 32.633447 0 0 1 13.012841-4.053844 56.145745 56.145745 0 0 1 39.362829 7.256381 55.091745 55.091745 0 0 1 8.472535 6.364536l56.064668 50.348748v304.038329a13.701994 13.701994 0 0 0-0.364846 1.905307z"
                  fill="#1296db" p-id="9577"></path>
              <path
                  d="M335.292923 510.801501a13.701994 13.701994 0 0 1 0.364846-1.662076v322.726552c-0.608077-103.373032-0.567538-206.746064-0.770231-310.078558a63.523742 63.523742 0 0 1 0.405385-10.985918z"
                  fill="#1296db" opacity=".6" p-id="9578"></path>
              <path
                  d="M924.357052 758.937317l-119.142487 109.453798a15.201916 15.201916 0 0 1-1.459384 0.972923l-0.445923 0.324308-0.810769 0.486461a56.753822 56.753822 0 0 1-67.942432-6.688843l-7.175304-6.283459-39.524983-36.119754V152.765964c0.648615-5.634844 1.621538-11.269687 2.716076-16.782916 2.837691-14.391148 15.485686-21.525914 25.133835-30.525448 20.958376-19.458453 42.565366-38.187214 63.929126-57.240283 14.715455-13.134456 29.390372-26.30945 44.227442-39.362829 12.931764-11.391303 37.984522-10.823765 50.146056-3.770075a40.984367 40.984367 0 0 1 8.431996 6.526689l13.701994 13.215533 11.066995 10.580534 10.094073 9.769765a46.416518 46.416518 0 0 1 7.215843 8.472535 47.551595 47.551595 0 0 1 6.891535 26.187834c-0.202692 59.429359 0.243231 118.858718 0.364846 178.369154q0.364846 151.411088 0.648615 302.822176 0 77.590582 0.283769 155.140625v7.094228c0.608077 15.404609 0.283769 25.579758-8.350919 35.673831z"
                  fill="#1296db" p-id="9579"></path>
            </svg>
            <span class="system_title">美食吃坊后台管理</span>
          </el-menu-item>
          <el-sub-menu v-for="oneRouter in canShowRoutes" :key="oneRouter.path" :index="oneRouter.path">
            <template #title>
              <el-icon>
                <iconfont-svg :icon="oneRouter.meta.icons" size="25"></iconfont-svg>
              </el-icon>
              <span style="margin-left: 15px; letter-spacing: 0.1rem" >
              {{ oneRouter.meta.title }}
            </span>
            </template>
            <el-menu-item v-for="twoRouter in oneRouter.children" :key="twoRouter.path" :index="twoRouter.path">
              <span style="letter-spacing: 0.1rem; margin-left: 30px" class="sub_title">
                {{ twoRouter.meta.title }}
              </span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="nav">
            <div>
              <el-icon v-show="isCollapse" size="26px" @click="isCollapse = !isCollapse">
                <Expand/>
              </el-icon>
              <el-icon v-show="!isCollapse" size="26px" @click="isCollapse = !isCollapse">
                <Fold/>
              </el-icon>
              <el-icon @click="refreshPage" style="margin-left: 10px" size="26">
                <RefreshRight/>
              </el-icon>
            </div>
            <div>
              <el-tooltip
                  class="box-item"
                  effect="light"
                  placement="bottom"
              >
                <div style="margin-left: 20px">
                  <el-avatar :size="30" :src="'https://menu-api.oss-cn-beijing.aliyuncs.com/dish/home_cooking/gulu.jpeg'"/>
                </div>
                <template #content>
                  <div style="width: 100px; max-height: 100px; padding: 10px 5px; text-align: center">
                    <div style="display: flex; align-items: center">
                      <iconfont-svg size="18" icon="icon-tuichudenglu"/>
                      <span class="logout" @click="logout">退出登录</span>
                    </div>
                  </div>
                </template>
              </el-tooltip>
            </div>
          </div>
          <el-divider/>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {computed, ref} from 'vue'
import {Document, Menu as IconMenu, Location, Setting, Fold, Expand, RefreshRight} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router/dist/vue-router";
import {tokenStore} from "@/store/token.js";

export default {
  name: "Home",
  components: {
    Document,
    IconMenu,
    Location,
    Setting,
    Fold,
    Expand,
    RefreshRight,
  },
  setup() {
    const router = useRouter()
    const tStore = tokenStore()
    // 监听能够显示的路由
    const canShowRoutes = computed(() => {
      console.log(router.options.routes)
      return router.options.routes[1].children.filter((item) => {
        return item.meta.showRouter
      })
    })
    // aside是否折叠
    const isCollapse = ref(false)
    // 刷新页面
    const refreshPage = () => {
      ElMessage.info('该功能还在开发中~')
    }
    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath)
    }
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath)
    }
    // 退出登录
    const logout = () => {
      tStore.removeToken()
      // 重新跳转到登录页面
      router.push('/login')
    }
    return {
      router,
      isCollapse,
      logout,
      handleClose,
      handleOpen,
      refreshPage,
      canShowRoutes
    }
  }
}
</script>
<style>
body {
  margin: 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  height: 100vh;
  width: 17vw;
}
</style>

<style scoped lang="scss">
.logout {
  margin-left: 4px;
  cursor: pointer;
  font-size: 14px;
}
.logout:hover {
  color: #32a3b1;
}
:deep(.el-header) {
  padding: 0 !important;
}

:deep(.el-menu--collapse) {
  min-height: 100vh;
}

.nav {
  height: 70px;
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
}

.system_title {
  color: #FFFFFF;
  margin-left: 10px;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 19px
}

:deep(.el-divider--horizontal) {
  border-top: 3px solid rgb(246, 246, 247);
  margin: 0;
}

.el-menu-item {
  color: hsla(0,0%,100%,.65);
}

.el-menu-item.is-active {
  color: rgb(255, 255, 255);
  background: rgb(24, 144, 255) !important;
}
:deep(.el-sub-menu .el-menu-item) {
  background: rgb(0, 12, 23);
}
// 设置鼠标移入子路由时, 悬浮样式发生改变
.sub_title:hover {
  color: rgb(255, 255, 255);
}
</style>

